<template>
  <div class="page-style">
    <warehousing-bill-btn :select-arr="selectArr" @billNum="billNum" />
    <warehousing-bill-tab :table-data="tabData" @selectedVal="selectedValFun" />
    <pagination :total="total" @pagination="pageChangeFun" />
  </div>
</template>

<script>
import warehousingBillBtn from './components/warehousing-bill/warehousing-bill-btn'
import warehousingBillTab from './components/warehousing-bill/warehousing-bill-tab'
import pagination from '@/components/Pagination'
import { getWarehouseBillList } from '@/api/wms'

export default {
  components: {
    pagination,
    warehousingBillBtn,
    warehousingBillTab
  },
  data() {
    return {
      total: 0,
      selectArr: [],
      tabData: [],
      pape: 1,
      num: 10,
      production_order_num: ''
    }
  },
  created() {
    this.getWarehouseBillList()
  },
  methods: {
    pageChangeFun(val) {
      console.log(val)
      this.page = val.page
      this.num = val.limit
      this.getWarehouseBillList()
    },
    selectedValFun(val) {
      console.log(val)
      this.selectArr = val
    },
    getWarehouseBillList() {
      const data = {
        p: this.page,
        num: this.num,
        production_order_num: this.production_order_num
      }
      getWarehouseBillList(data).then(res => {
        console.log(res)
        this.total = Number(res.count)
        this.tabData = res.list
      })
    },
    billNum(val) {
      this.production_order_num = val
      this.getWarehouseBillList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
